import React from 'react'
import {Menu} from "antd"
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'

function useActive (currentPath:string, path:string) {
    return currentPath === path ? "ant-menu-item-selected" : ''
}

export const Navigation = () => {
    const router = useSelector<AppState, RouterState>(state => state.router)
    const pathname = router.location.pathname
    
    return (
        <Menu mode="horizontal" selectable={false}>
           <Menu.Item className={useActive(pathname, '/')}>
               <Link to="/">首页</Link>
            </Menu.Item> 
            <Menu.Item className={useActive(pathname, '/shop')}>
               <Link to="/shop">商城</Link>
            </Menu.Item>
            <Menu.Item className={useActive(pathname, '/signIn')}>
               <Link to="/signIn">登录</Link>
            </Menu.Item>
            <Menu.Item className={useActive(pathname, '/signUp')}>
               <Link to="/signUp">注册</Link>
            </Menu.Item>
        </Menu>
    )
}
